<template>
  <div style="height: 100%;">
    <div class="btbox btboxbg flexb">
      <div class="flex ximg">
        <a @click="handleShengduActive(0)" title="deep"
          :class="{ 'active' : active === 0 }">
          <img src="@/assets/img/x1.png" alt="">
        </a>
        <a @click="handleShengduActive(1)" title="buy"
          :class="{ 'active' : active === 1 }">
          <img src="@/assets/img/x3.png" alt="">
        </a>
        <a @click="handleShengduActive(2)" title="sell"
          :class="{ 'active' : active === 2 }">
          <img src="@/assets/img/x2.png" alt="">
        </a>
      </div>
      <div class="depthPriceList">
        {{$t('jy.sdhb')}}
        <el-select v-model="depthCheckedValue"
        v-if="depthData.depthArray && depthData.depthArray.length"
        :placeholder="$t('order.inputChoose')"
        @change="handleDepthChange"
        class="littleSelect" title="">
          <el-option v-for="item in depthData.depthArray" :key="item"
            :label="handleGetItem(item)"
            :value="item">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="flex tl topc leftTitle">
      <span>
        {{$t('jy.price')}}
        <template v-if="trad.b.name === 'MEETONE'">
          (meet...)
        </template>
        <template v-else>
          ({{trad.b.name}})
        </template>
      </span>
      <span>{{$t('jy.number')}}({{trad.a.name}})</span>
      <span>{{$t('jy.cje')}}
        <template v-if="trad.b.name === 'MEETONE'">
          (meet...)
        </template>
        <template v-else>
          ({{trad.b.name}})
        </template>
      </span>
    </div>

    <div class="overflowbox">

      <div class="blist scrollbar">
        <!-- 卖出深度 所有-->
        <template v-for="(item, index) in priceDepthAsks">
          <div class="ltd" @click="handleGetData(item.price, item.numasksAll, index, 'mc')"
          v-if="asksShow && !asksShow_n" :key="index">
            <span class="color-sr">
              <el-tooltip placement="bottom" effect="light" v-if="item.checked">
                <div slot="content">
                  <p>{{$t('jy.currentOrder')}}</p>
                </div>
                <i v-if="item.checked" class="redTag"></i>
              </el-tooltip>
              {{toFixed(toNonExponential(item.price), depthCheckedValue)}}
              </span>
            <span>{{toFixed(toNonExponential(item.num), trad.coinDecimal)}}</span>
            <i class="ambg ambg1" :style="{width: Number(((item.num/asksNumber) * 100).toFixed(2)) + '%' }"></i>
            <!-- <span class="color-fff">{{(handleAccMul(item.price, item.num)).toFixed(4)}}</span> -->
            <span class="color-fff" v-if="trad.b.name !== 'CUSD'">{{Number(item.amount).toFixed(4)}}</span>
            <span class="color-fff" v-else>{{Number(item.amount).toFixed(2)}}</span>
          </div>
        </template>
        <!-- 卖出深度 部分-->
        <template v-for="(item, index) in priceDepthAsks_n">
          <div class="ltd" @click="handleGetData(item.price, item.numasksAll, index, 'mc')"
          v-if="!asksShow && asksShow_n" :key="index">
            <span class="color-sr">
              <el-tooltip placement="bottom" effect="light" v-if="item.checked">
                <div slot="content">
                  <p>{{$t('jy.currentOrder')}}</p>
                </div>
                <i v-if="item.checked" class="redTag"></i>
              </el-tooltip>
              {{toFixed(toNonExponential(item.price), depthCheckedValue)}}
            </span>
            <span>{{toFixed(toNonExponential(item.num), trad.coinDecimal)}}</span>
            <i class="ambg ambg1" :style="{width: Number(((item.num/asksNumber_n) * 100).toFixed(2)) + '%' }"></i>
            <!-- <span class="color-fff">{{(handleAccMul(item.price, item.num)).toFixed(4)}}</span> -->
            <span class="color-fff" v-if="trad.b.name !== 'CUSD'">{{Number(item.amount).toFixed(4)}}</span>
            <span class="color-fff" v-else>{{Number(item.amount).toFixed(2)}}</span>
          </div>
        </template>
      </div>

      <!-- 当前价格 -->
      <div class="tccob btboxbg flexb" style="position: relative">
        <div class="flexc" style="width: 100%">
          <strong class="mr5" v-if="priceData && priceData.price" @click="handleGetData(priceData.price, 0, -1, 'price')">
            <span class="color-sl" v-if="priceData && priceData.change > 0">
              {{toFixed(toNonExponential(priceData.price), trad.priceDecimal) || toFixed(0, trad.priceDecimal)}}
              <i class="iconfont icon-shang fontz" style="vertical-align: middle;"></i>
            </span>
            <span class="color-sr" v-if="priceData && priceData.change < 0">
              {{toFixed(toNonExponential(priceData.price), trad.priceDecimal) || toFixed(0, trad.priceDecimal)}}
              <i class="iconfont icon-xia fontz" style="vertical-align: middle;"></i>
            </span>
            <span v-if="!priceData.change">{{toFixed(toNonExponential(priceData.price), trad.priceDecimal) || toFixed(0, trad.priceDecimal)}}</span>
          </strong>
          <strong class="mr5" v-else>{{toFixed(0, trad.priceDecimal)}}</strong>
        </div>
        <template v-if="$route.name !== 'embedTrade' && $store.state.app.scatter.identity && $appName === 'eosNewdex'">
          <el-tooltip class="item" effect="light" :content="$t('ndxStake.marketRemind')" placement="bottom">
            <i class="iconfont icon-tixing1 setRemind" @click="handleRemindSet(0)"></i>
          </el-tooltip>
        </template>
        <!-- 未登录点击登录 -->
        <template v-if="$route.name !== 'embedTrade' && !$store.state.app.scatter.identity && $appName === 'eosNewdex'">
          <el-tooltip class="item" effect="light" :content="$t('ndxStake.marketRemind')" placement="bottom">
            <i class="iconfont icon-tixing1 setRemind" @click="handleWalletPermission()"></i>
          </el-tooltip>
        </template>
      </div>

      <!-- 买入深度 -->
      <div class="blist scrollbar">
        <template v-for="(item, index) in priceDepthBids">
          <div class="flex ltd" @click="handleGetData(item.price, item.numbidsAll, index, 'mr')"
            v-if="index < bidsLen && bidsShow" :key="item.price">
            <span class="color-sl">
              <el-tooltip placement="bottom" effect="light" v-if="item.checked">
                <div slot="content">
                  <p>{{$t('jy.currentOrder')}}</p>
                </div>
                <i v-if="item.checked" class="redTag greenTag"></i>
              </el-tooltip>
              {{toFixed(toNonExponential(item.price), depthCheckedValue)}}
            </span>
            <span>{{toFixed(toNonExponential(item.num), trad.coinDecimal)}}</span>
            <i class="ambg" :style="{width: Number(((item.num/bidsNumber) * 100).toFixed(2)) + '%' }"></i>
            <!-- <span class="color-fff">{{(handleAccMul(item.price, item.num)).toFixed(4)}}</span> -->
            <span class="color-fff" v-if="trad.b.name !== 'CUSD'">{{Number(item.amount).toFixed(4)}}</span>
            <span class="color-fff" v-else>{{Number(item.amount).toFixed(2)}}</span>
          </div>
        </template>
      </div>

    </div>
    <!-- 行情提醒设置 -->
    <el-dialog
      class="remindSet"
      :show-close="true"
      :close-on-click-modal="false"
      :visible.sync="remindSetVisible"
      width="750px">
      <remind-set
        :remindSetStatus="remindSetStatus"
        :symbolId="trad.id"
        :symbol="trad.symbol"
        :contract="trad.a.code"
        :remindSetVisible="remindSetVisible"
        :symbolPrice="priceData && priceData.price
        ? toFixed(toNonExponential(priceData.price), trad.priceDecimal).toString() : toFixed(0, trad.priceDecimal).toString()"
        :priceDecimal="trad.priceDecimal"
        @listenRemind="handleRemind"/>
    </el-dialog>
  </div>
</template>

<script>
import Bus from '@/utils/bus';
import { toFixed, toFixedReset, toFixedDown, accMul, toNonExponential, createComparison } from '@/utils/validate';
import RemindSet from '@/components/RemindSet';

export default {
  name: 'trading-left',
  data() {
    return {
      active: 0,
      asksShow: false,
      asksShow_n: true,
      asksLen: 18,
      bidsShow: true,
      bidsLen: 18,
      value: '4',
      ticker: '', // 交易对

      numasksAll: 0,
      numbidsAll: 0,
      itemsAsks: [],
      itemsBids: [],
      priceDepthAsks: [], // 卖出全部
      priceDepthAsks_n: [], // 卖出后20条
      priceDepthBids: [], // 买入价格深度
      priceData: {}, // 订阅价格
      asksNumber: 0.01,
      asksNumber_n: 0.01,
      bidsNumber: 0.01,
      symbol1: '', // 交易对前缀
      depthCheckedValue: null,
      remindSetVisible: false, // 行情提醒设置
      remindSetStatus: 0, // 是否设置行情提醒
    };
  },
  props: {
    trad: Object,
    depthData: Object,
  },
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.$store.state.app.ownEntrustOrder = '';
        this.handloeMdInDepth();
      },
      deep: true,
    },
    'depthData.timesatep': function change() {
      this.depthCheckedValue = this.depthData.depthCheckedValue;
      this.handlePriceDepthWs();
    },
    '$store.state.app.ownEntrustOrder': function change() {
      if (this.depthData.timesatep) {
        this.handloeMdInDepth();
      }
    },
    '$store.state.app.marketPrice': function change() {
      // 订阅价格数据
      this.priceData = this.$store.state.app.marketPrice;
    },
    '$store.state.app.trade.id': function change() {
      this.itemsAsks = [];
      this.itemsBids = [];
      this.priceDepthAsks = [];
      this.priceDepthAsks_n = [];
      this.priceDepthBids = [];
      this.numasksAll = 0;
      this.numbidsAll = 0;
    },
  },
  components: {
    RemindSet
  },
  created() {
  },
  mounted() {
    // 订阅价格数据
  },
  methods: {
    // 深度铆钉
    handloeMdInDepth() {
      const storeApp = this.$store.state.app
      // 委托订单字段
      const ownEntrustOrder = storeApp.ownEntrustOrder;
      let ownEntrustOrderBuy;
      let ownEntrustOrderSell;
      let ownOrderBuy;
      let ownOrderBuyBoolean;
      let ownOrderSell;
      let ownOrderSellBoolean;
      if (ownEntrustOrder) {
        ownEntrustOrderBuy = ownEntrustOrder.filter(v => v.direction === 1)
        ownEntrustOrderSell = ownEntrustOrder.filter(v => v.direction === 2)
        ownOrderBuy = ownEntrustOrderBuy.map(val => toFixedDown(toNonExponential(Number(val.orderPriceStr)), this.depthCheckedValue));
        ownOrderSell = ownEntrustOrderSell.map(val => toFixedReset(toNonExponential(Number(val.orderPriceStr)), this.depthCheckedValue));
      }
      this.priceDepthAsks.forEach((v, index) => {
        const vv = v;
        const askzero = toNonExponential(vv.price);
        if (ownOrderSell) {
          ownOrderSellBoolean = ownOrderSell.find(val => Number(val) === Number(askzero));
        }
        if (ownOrderSellBoolean) {
          vv.checked = true;
          this.$set(this.priceDepthAsks, index, vv);
          const indexN = this.priceDepthAsks_n.findIndex(val => val.price === vv.price);
          if (indexN !== -1) {
            this.$set(this.priceDepthAsks_n, indexN, vv);
          }
        } else {
          vv.checked = false;
        }
      })
      // 买入深度
      this.priceDepthBids.forEach((v, index) => {
        const vv = v;
        const askzero = toNonExponential(vv.price);
        if (ownOrderBuy) {
          ownOrderBuyBoolean = ownOrderBuy.find(val => Number(val) === Number(askzero));
        }
        if (ownOrderBuyBoolean) {
          vv.checked = true;
          this.$set(this.priceDepthBids, index, vv);
        } else {
          vv.checked = false;
        }
      })
    },

    // 调整深度数据
    handlePriceDepthWs() {
      // 当前币种
      const asks = this.depthData.asks;
      const bids = this.depthData.bids;
      let asksOpen = 1;
      let bidsOpen = 1;
      // 卖出深度
      if (asks) {
        this.numasksAll = 0;
        asks.sort(createComparison('price')); // 重新排序
        asks.forEach((v) => {
          const vv = v;
          this.numasksAll += v.num;
          vv.numasksAll = this.numasksAll;
        });
        this.asksNumber = Math.max.apply(null, asks.map(v => v.num));
        this.priceDepthAsks_n = asks.filter((v, i) => i < this.asksLen);
        this.priceDepthAsks_n.reverse();
        this.asksNumber_n = Math.max.apply(null, this.priceDepthAsks_n.map(v => v.num));
        asks.reverse();
        this.priceDepthAsks = asks;
      }
      if (asks.length === 0) {
        asksOpen = 0
      }

      // 买入深度
      if (bids) {
        this.numbidsAll = 0;
        bids.sort(createComparison('price'));
        bids.reverse().forEach((v) => {
          const vv = v;
          this.numbidsAll += Number(v.num);
          vv.numbidsAll = this.numbidsAll
        });
        this.priceDepthBids = bids;
      }
      if (bids.length === 0) {
        bidsOpen = 0
      }
      // 铆点
      this.handloeMdInDepth();
      this.handleShengduActive(this.active);
      let mrFirstPrice = 0;
      if (this.priceDepthBids.length > 0) {
        mrFirstPrice = this.priceDepthBids[0].price;
      }
      this.$store.dispatch('setOpenShijia', [asksOpen, bidsOpen, mrFirstPrice]);
      this.$forceUpdate();
    },

    // 价格深度切换
    handleDepthChange(val) {
      this.depthCheckedValue = val;
      this.$emit('listenDepthChange', val);
      // this.handleShengduActive(0);
    },

    // 深度卖买盘切换
    handleShengduActive(value) {
      this.active = value;
      if (value === 0) {
        this.bidsShow = true;
        this.asksShow_n = true;
        this.asksShow = false;
        this.bidsLen = 18;
        let itemBids = [];
        itemBids = this.priceDepthBids.filter((v, i) => i < 18);
        this.bidsNumber = Math.max.apply(null, itemBids.map(v => v.num));
      }
      if (value === 2) {
        this.asksShow = true;
        this.asksShow_n = false;
        this.bidsShow = false;
      }
      if (value === 1) {
        this.bidsShow = true;
        this.asksShow_n = false;
        this.asksShow = false;
        this.bidsLen = this.priceDepthBids.length;
        this.bidsNumber = Math.max.apply(null, this.priceDepthBids.map(v => v.num));
      }
    },
    handleGetItem(item) {
      if (item === -1) {
        return `${this.$t('jy.swzs')}`;
      }
      if (item === -2) {
        return `${this.$t('jy.bwzs')}`;
      }
      if (item === -3) {
        return `${this.$t('jy.qwzs')}`;
      }
      return `${item} ${this.$t('jy.wxsd')}`;
    },

    // 设置行情提醒
    handleRemindSet(val) {
      this.remindSetStatus = val;
      this.remindSetVisible = true;
    },
    // 关闭弹窗
    handleRemind(event, val) {
      if (event === 'added') {
        this.remindSetVisible = val;
        this.remindSetStatus = 1;
      }
    },
    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    toFixed(numb, p) {
      return toFixed(numb, p);
    },
    toFixedReset(numb, p) {
      return toFixedReset(numb, p);
    },
    toFixedDown(numb, p) {
      return toFixedDown(numb, p);
    },
    toNonExponential(num) {
      return toNonExponential(num);
    },
    handleGetData(price, number, index, way) {
      Bus.$emit('handleBusValue', price, number, index, way);
    },
    handleAccMul(num1, num2) {
      return accMul(num1, num2);
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.littleSelect {
  width: 80px !important;

  /deep/ .el-input--suffix {
    input {
      padding-right: 20px;
    }
  }
}

.btbox {
  padding: 5px;
}

.btboxbg {
  background: $-topcolorf7;
}

.tl {
  padding: 9.5px 0;
  span {
    color: #999;
    font-size: 12px;
  }
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.ximg {
  a {
    display: block;
    padding: 1px;
    margin: 0 5px 0 0;
    border: 1px solid rgba(0, 0, 0, 0);
    img {
      display: block;
      vertical-align: top;
    }

    &.active, &:hover {
      border: 1px solid rgba(0, 0, 0, .2);
    }
  }
}

.blist {
  // padding: 8px 0;
  max-height: 742px;
  overflow: auto;

  .ltd {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20.6px;
    line-height: 20.6px;
    overflow: hidden;
    i.ambg {
      height: 99%;
      position: absolute;
      right: 0;
      // background: #67C269;
      z-index: 9;
      opacity: .3;
      top: 50%;
      transform: translateY(-50%);
      // background: linear-gradient(to right, RGBA(82, 177, 109, .2), RGBA(82, 177, 109, .4));
      background: RGBA(82, 177, 109, .35);
    }

    i.ambg1 {
      // background: linear-gradient(to right, RGBA(232, 18, 52, .15), RGBA(232, 18, 52, 0.3));
      background: RGBA(232, 18, 52, 0.2);
    }

    &:hover {
      cursor: pointer;
      span {
        font-weight: bold;
      }
      i.ambg1.ambg {
        background: RGBA(232, 18, 52, .4);
      }
      i.ambg {
        background: RGBA(82, 177, 109, .6);
      }
    }
    span {
      position: relative;
      text-align: right;
      display: inline-block;
      width: 100px;
      max-width: 100px;
      overflow: hidden;
      z-index: 10;
      white-space: nowrap;

      &:first-child {
        width: 86px;
        max-width: 86px;
        text-align: left;
        padding-left: 8px;
        .redTag {
          position: absolute;
          top: 50%;
          left: 0;
          display: inline-block;
          width:0;
          height:0;
          border-top:4px solid transparent;
          border-bottom: 4px solid transparent;
          border-left: 4px solid red;
          margin-top: -4px;
        }
        .greenTag {
          border-left: 4px solid #67C269;
        }
      }

      &:last-child {
        width: 78px;
        max-width: 78px;
        margin-right: 3px;
      }
    }
  }
}

.leftTitle {
  display: flex;
  height: 37px;
  span {
    text-align: right;
    display: inline-block;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 5px;

    &:first-child {
      text-align: left;
      padding-left: 8px;
      width: 85px;
    }

    &:last-child {
      width: 86px;
    }
  }
}

.setRemind {
  // opacity: .2;
  opacity: 1;
  position: absolute;
  right: 5px;
  color: #FF9800;
  cursor: pointer;
}

.depthPriceList /deep/ .el-input__suffix {
  right: 0;
}

.theme-278EDA {
  span {
    color: #333;
  }
  .leftTitle {
    span {
      color: #999 !important;
    }
  }
}

.theme-1B1D27 {
  .tl {
    span {
      color: #999;
    }
  }
  .btboxbg {
    background: $-topcolor;
  }
  .box-shadow {
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
    background: $-topcolor;
  }
  .topcolor {
    background: $-topcolor;
  }
  .topc {
    background: $-topcolor;
  }
  .ximg {
    a {
      &.active, &:hover {
        border: 1px solid #4e5b85;
      }
    }
  }
  .color-fff {
    color: rgba(255, 255, 255, .8);
  }
}

.overflowbox {
  height: 93%;
  overflow: hidden;
}
.theme-278EDA {
  .tccob {
    background: #f9f9f9;
  }
}

.tccob {
  padding: 8px 5px;

  strong {
    font-size: 20px;
    font-weight: normal;
  }

  span {
    vertical-align: bottom;
  }

  i {
  }
}

.color-999 {
  color: #999;
}
.color-sl {
  color: #67C269 !important;
}
.color-sr {
  color: #EE1443 !important;
}
.color-fff {
  color: rgba(0, 0, 0, .7);
}
</style>

